<!DOCTYPE html>
<html>
<head>
    <title>sTaxi</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html, charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <style>
      html, body,#page1 {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
	  
	  #map-canvas{
		height: 60%;
		margin: 0px;
        padding: 0px
	  }
    </style>
    <!--
    Include the maps javascript with sensor=true because this code is using a
    sensor (a GPS locator) to determine the user's location.
    See: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  //HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var myLatlng = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      // var infowindow = new google.maps.InfoWindow({
        // map: map,
        // position: myLatlng,
        // content: 'Your Position'
      // });
	  
	    var marker = new google.maps.Marker({
		  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
		  position: myLatlng,
		  map: map,
		  title: 'My Position'
		});
		

      map.setCenter(myLatlng);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content,
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);


    </script>
</head>
<body> 
  
<!-- Página principal -->
<section data-role="page" id="page1" data-title="Página de inicio">
  
    <header data-role="header">
        <h1>Menú</h1>
    </header>
    <!-- end header -->
  
    <section data-role="content">
        <p>Nuevo Usuario</p>
    </section>
	<div id="map-canvas"></div>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>
           <a href="#page2" data-role="button" data-transition="slidedown">Posiciones</a>
		   PFC 2013 
        </p>
    </footer>
    <!-- end footer --> 
  
</section>
<!-- end page 1-->
 
<!-- Segunda página -->
<section data-role="page" id="page2" data-title="Página 2">
  
    <header data-role="header">
        <h1>Posiciones</h1>
    </header>
    <!-- end header -->
  
    <section data-role="content">
        <p>Mapa</p>
    </section>
    <!-- end content -->
  
    <footer data-role="footer">
        <p>
           <a href="#page1" data-role="button" data-transition="slidedown" data-direction="reverse">Menú</a>
		   PFC 2013 
        </p>
    </footer>
    <!-- end footer --> 
  
</section>
<!-- end page 2-->
  
</body>
</html>